<div class="order-service-details">
  <div class="order-service-details-top" ng-class="{'order-service-details-top-icon-top': $ctrl.serviceClass.vendor || $ctrl.docUrl || $ctrl.supportUrl}">
    <div class="service-icon">
      <span ng-if="!$ctrl.imageUrl" class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
      <span ng-if="$ctrl.imageUrl" class="image"><img ng-src="{{$ctrl.imageUrl}}" alt=""></span>
    </div>
    <div class="service-title-area">
      <div class="service-title">
        {{$ctrl.serviceName}}
      </div>
      <div ng-if="$ctrl.serviceClass.vendor" class="service-vendor">
        {{$ctrl.serviceClass.vendor}}
      </div>
      <div ng-if="$ctrl.serviceClass.tags" class="order-service-tags">
        <span ng-repeat="tag in $ctrl.serviceClass.tags" class="tag">
          {{tag}}
        </span>
      </div>
      <ul ng-if="$ctrl.docUrl || $ctrl.supportUrl" class="list-inline order-service-documentation-url">
        <li ng-if="$ctrl.docUrl" >
          <a ng-href="{{$ctrl.docUrl}}" target="_blank" class="learn-more-link">View Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
        </li>
        <li ng-if="$ctrl.supportUrl" >
          <a ng-href="{{$ctrl.supportUrl}}" target="_blank" class="learn-more-link">Get Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
        </li>
      </ul>
    </div>
  </div>
  <div class="order-service-description-block">
    <p ng-if="!$ctrl.multipleServicePlans && ($ctrl.selectedPlan.spec.externalMetadata.displayName || $ctrl.selectedPlan.spec.description)">
      <span ng-if="$ctrl.selectedPlan.spec.externalMetadata.displayName">
        Plan {{$ctrl.selectedPlan.spec.externalMetadata.displayName}}
        <span ng-if="$ctrl.selectedPlan.spec.description">&ndash;</span>
      </span>
      <span ng-if="$ctrl.selectedPlan.spec.description">{{$ctrl.selectedPlan.spec.description}}</span>
    </p>
    <p ng-if="!$ctrl.description && !$ctrl.longDescription" class="description">No description provided.</p>
    <p ng-if="$ctrl.description" ng-bind-html="($ctrl.description | linky : '_blank')" class="description"></p>
    <p ng-if="$ctrl.longDescription" ng-bind-html="$ctrl.longDescription | linky : '_blank'" class="description"></p>
    <div ng-if="$ctrl.imageDependencies.length">
      <div class="order-service-subheading">Image Dependencies</div>
      <div ng-repeat="imageName in $ctrl.imageDependencies" class="order-service-dependent-image">
        <span class="pficon pficon-image" aria-hidden="true"></span>
        <span class="sr-only">Image</span>
        {{imageName}}
      </div>
    </div>
  </div>
</div>
